// webpack 是node写出来的 node的写法
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin') // 如果抽离2个再new一个
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // optimization: { // 优化项
  //   minimizer: [
  //     new UglifyJsPlugin({
  //       cache: true,
  //       parallel: true, // 并发压缩
  //       sourceMap: true // set to true if you want JS source maps  源码映射
  //     }),
  //     new OptimizeCSSAssetsPlugin({}) // css 压缩了 js还原了 所以要用uglifyjs-webpack-plugin
  //   ]
  // },
  devServer: { // 开发服务的配置
    port: 3000,
    progress: true,
    contentBase: './build',
    compress: true // 压缩
  },
  mode: 'development', // 模式 默认两种 production development
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.[hash].js', // 打包好的文件名
    path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径
  },
  plugins: [ // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      hash: true,
      minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ],
  module: { // 模块
    rules: [ // 规则， css-loader 接续 @import 这种语法的
      // style-loader 他是把css 插入到head的标签中
      // loader的特点 希望单一
      // loader的用法 字符串至少一个loader
      // 多个loader需要 []
      // loader的顺序 默认是从右向左执行
      {
        test: /\.css$/, 
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        // 可以处理less文件 sass stylus node-sass sass-loader
        // stylus stylus-loader
        test: /\.less$/, 
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // @import 解析路径
          'postcss-loader',
          'less-loader' // 把less -> css
        ]
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], // 预设
            plugins: [
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose" : true }],
              "@babel/plugin-transform-runtime"
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  }
}